<template>
    <div class="sszd">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 5px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                        
                            <Form :model="formItem" label-position="left" :label-width="80" inline>
                                <!-- <FormItem :label-width="0" label="">
                                    <Select v-model="refvip" size="small" style="width:120px">
                                        <Option value="会员用户名" key="2">会员用户名</Option>                                        
                                        <Option value="上级代理用户名" key="1">上级代理用户名</Option>
                                    </Select>
                                    :
                                    <Input size="small" v-model="userName" style="width: 150px" :placeholder="'请输入'+refvip"></Input>
                                </FormItem> -->
                                <FormItem :label-width="35" label="类型：">
                                    <Select v-model="type" size="small" @on-change="getsszd()" style="width:120px">
                                        <Option  value="1" key="1">充值记录</Option>
                                        <Option  value="2" key="2">提现记录</Option>
                                    </Select>
                                </FormItem>
                                <FormItem :label-width="35" label="状态：">
                                    <Select v-model="model2" size="small" style="width:100px">
                                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="选择日期范围：">
                                    <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="Select date and time" style="width: 200px"></DatePicker>
                                </FormItem>
                                <Button type="primary"  size="small" style="margin-top: 5px;" @click="search">查询</Button>
                                <Button type="ghost"  size="small" style="margin-top: 5px;" @click="searchReset">重置</Button>
                            </Form>
                        </Col>
                    </Row>
                </span>
                <div class="line-chart-con">
                    <Table border stripe :columns="types==1?title:title2" :data="data" ></Table>
                    <Row class="margin-top-10" :gutter="10">
                        <Col :md="12" :lg="12">
                            <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                        </Col>
                    </Row>
                    
                </div>
            </Card>
        </Row>
    </div>
</template>
<style lang="less">
.sszd{
    .ivu-form-item{
        margin-bottom:0px;
    }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
}
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            refvip:'会员用户名',
            lottery:'',
            model2: '全部',
            userName:'',
            type:'1',
            types:'1',
            gameInfo:{},
            userInfo:{},
            formItem:{
                    input:'',
                    time:['2018-02-01', '2018-04-01']
            },
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            queryData:{
                uid:{
                    operator:'=',
                    value:''
                },
                status_code:{
                    operator:'=',
                    value:''
                }
            },
            order_param:'id',
            cityList: [
                    {
                        value: '全部',
                        label: '全部'
                    },
                    {
                        value: '-1',
                        label: '待处理'
                    },
                    {
                        value: '1',
                        label: '已通过'
                    },
                    {
                        value: '2',
                        label: '已拒绝'
                    }
                ],
                
            data:[],
            title:[
                {
                    title:'充值申请编号',
                    key: 'order_id',
                    align:'center',
                },
                {
                    title:'用户备注',
                    key: 'user_comment',
                    align:'center',
                },
                {
                    title:'用户余额',
                    key: 'this_balance',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.this_balance
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'充值金额',
                    key: 'money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span','充值金额'),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'已付金额',
                    key: 'paid_money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.paid_money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'未付金额',
                    key: 'un_paid_money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.un_paid_money
                               }
                           })
                    },
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'订单状态',
                    key: 'status_code',
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                               h('Tag',{
                                   props:{
                                       color:params.row.status_code==-1?"yellow":params.row.status_code==1?"green":params.row.status_code==2?"red":"red"
                                   }
                               },params.row.status_code==-1?"待处理":params.row.status_code==1?"已转账":params.row.status_code==2?"已拒绝":"错误"),
                           ])//params.column.key
                    }
                },
                {
                    title:'申请时间',
                    key: 'created',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'最近操作时间',
                    key: 'updated',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'操作备注',
                    key: 'comment',
                    align:'center',
                }
            ],
            title2:[
                {
                    title:'充值申请编号',
                    key: 'order_id',
                    align:'center',
                },
                {
                    title:'用户备注',
                    key: 'user_comment',
                    align:'center',
                },
                {
                    title:'用户余额',
                    key: 'this_balance',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'提现金额',
                    key: 'money',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span','提现金额'),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'订单状态',
                    key: 'status_code',
                    align:'center',
                    render: (h, params) => {
                           return h('div', [
                               h('Tag',{
                                   props:{
                                       color:params.row.status_code==-1?"yellow":params.row.status_code==1?"green":params.row.status_code==2?"red":"red"
                                   }
                               },params.row.status_code==-1?"待处理":params.row.status_code==1?"已转账":params.row.status_code==2?"已拒绝":"错误"),
                           ])//params.column.key
                    }
                },
                {
                    title:'申请时间',
                    key: 'created',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'最近操作时间',
                    key: 'updated',
                    align:'center',
                    renderHeader: (h, params) => {
                           return h('div', [
                               h('span',params.column.title),
                               h('a',{
                                   class:'order',
                                   style:{
                                       color: this.order_param==params.column.key?'':'#a0a0a0'
                                   },
                                   on: {
                                        click: () => {
                                            this.order (params.column.key)
                                        },
                                    },
                               },[
                                   h('Icon',{
                                        props:{
                                            type:"arrow-down-b"                                           
                                        }
                                   })
                               ])
                           ])//params.column.key
                    }
                },
                {
                    title:'操作备注',
                    key: 'comment',
                    align:'center',
                }
            ],
            
        }
    },
    computed: {
        
    },
    
    methods: {
        init(){
            this.gameInfo=JSON.parse(sessionStorage.gameInfo)
            this.userInfo=JSON.parse(sessionStorage.user)
            this.formItem.time=this.getNowFormatDate()
            
            this.queryData.uid.value=this.userInfo.user_data.User.id
            this.getsszd()
            
        },
        setTime(t){
            
            this.formItem.time=t
            
        },
        order(key){
            this.order_param=this.order_param==key?'id':key
            this.getsszd()
        },
        search(){
             if(this.model2!=='全部'){
                 this.queryData.status_code.value=this.model2
             }
            this.getsszd ()
        },
        searchReset(){
            this.model2='全部'
            // this.refvip='会员用户名'
            // this.userName=''
            // this.lottery=''
            this.queryData.status_code.value=''
            this.formItem.time=this.getNowFormatDate()            
            this.search()
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getsszd()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getsszd()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
        getsszd(){
            this.types=this.type
            let data={
                limit:this.page.limit,
                order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                time_between:`${this.formItem.time[0]},${this.formItem.time[1]}`
            }

            if(this.type==1){
                this.$api.repeater(this,'getRecharge',data).then(res=>{
                    this.page.count=res.data.Count
                    if(res.data.Records==null){
                        this.data=[]
                    }else{
                        this.data=res.data.Records
                    }
                })
            }else{
                this.$api.repeater(this,'getWithdraw',data).then(res=>{
                    this.page.count=res.data.Count
                    if(res.data.Records==null){
                        this.data=[]
                    }else{
                        this.data=res.data.Records
                    }
                })
            }
            
        }
    },
    mounted (){
        this.init()
    }
};
</script>
